<template>
	<view class="page-wrapper">
		<div class="title" :style="'height:' + navH + 'px'" >
			<div @click="goBack" class="title-r">
				<image src="../../../static/img/public/left.png" mode="widthFix"></image>
			</div>
			<div class="title-c">
				<div class="title-tab">
					<button :class="nowTitleTab === 0 ? 'active' : ''" @click="titleTabChange(0)">整理</button>
					<button :class="nowTitleTab === 1 ? 'active' : ''" @click="titleTabChange(1)">培训</button>
				</div>
			</div>
		</div>
		<div class="content" :style="'height: calc(100% - ' + navH + 'px)'">
			<div class="title-tab-item" v-show="nowTitleTab === 0">
				<swiper class="swiper" v-if="productList.length !== 0" :indicator-dots="true" :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item, index) in productBanner" :key="index">
						<div class="swiper-image-wrapper">
							<image class="swiper-image" :src="domain + item" mode="widthFix"></image>
						</div>
					</swiper-item>
				</swiper>
				<div class="type" v-if="productList.length !== 0">
					<ul>
						<li  v-for="item in productList" :key="item.goods_id" :class="nowProduct === item.goods_id ? 'active' : ''" @click="productTabHandler(item.goods_id)">
							<h3>
								<span v-show="item.sale_price > item.first_price">
									首单价格{{item.first_price}}
								</span>
								<p v-text="item.goods_name"></p>
							</h3>
							<span>
								<span>￥{{Math.round((item.sale_price-item.discount_price)*100)/100}}</span>
								<p>/{{item.total_count}}次</p>
							</span>
						</li>
					</ul>
				</div>
				<div class="type-info" v-if="productList.length !== 0">
					<image  v-for="(item,index) in this.nowProductObj.goods_images.split(',')" :key="index" :src="domain + item" mode="widthFix"></image>
				</div>
				<hEmpty v-else center="暂无产品" img="../../static/img/public/order-empty.png"></hEmpty>
			</div>
			<div class="title-tab-item title-tab-item-institution" v-show="nowTitleTab === 1" >
				<div class="institution-wrapper">
					<h3 @click="selectInstitution">{{nowInstitution.name}}</h3>
					<div class="video-wrapper">
						<div class="cover-wrapper" v-show="coverShow">
							<button @click="playVideo" >▲</button>
							<image :src="domain + nowCover" mode="heightFix"></image>
						</div>
						<video id='targetVideo' class="institution-video" :src="domain + nowVideo" controls></video>
					</div>
					<div class="course-wrapper">
						<ul class="course-tab">
							<li v-for="item in courseList" :key="item.goods_id" @click="toggleCourseTab(item)" :class="nowCourse.goods_id === item.goods_id ? 'active' : ''">{{item.goods_name}}</li>
						</ul>
						<div class="course-tab-item">
							<image v-for="(item, index) in nowInfo" :src="domain + item" mode="widthFix"></image>
						</div>
					</div>
				</div>
				<footer class="institution-footer">
					<span>￥{{Math.round((this.nowCourse.sale_price- this.nowCourse.discount_price)*100)/100}}</span>
					<button @click="goConfirmOrder">立即购买</button>
				</footer>
				<!-- <hEmpty center="暂无产品" img="../../static/img/public/order-empty.png"></hEmpty> -->
			</div>
		</div>
		<div v-if="nowTitleTab === 0 && productList.length !== 0" class="footer">
			<button @click="goConfirmOrder">
				立即预约
			</button>
			<button open-type="share" class="btn-share" bindtap='onShareAppMessage'>
				<image src="../../../static/img/public/share.png" mode="widthFix"></image>
			</button>
		</div>
		
		
		<!-- 切换机构 -->
		<drawer title="机构选择" cancle overlayHide height="50%" ref="drawer">
				<ul class="institution-list">
					<li v-for="item in institutionList" :key="item.id" @click="toggleInstitution(item)" :class="item.id === nowInstitution.id ? 'active' : ''">
						<div class="institution-item-center">
							<span>
								{{item.name}}
							</span>
						</div>
					</li>
				</ul>
		</drawer>
		
		<!-- 选择增值服务弹窗 -->
		<drawer @confirm="confirmIncrement" cancle overlayHide title="增值服务" height="60%" ref="selectIncrement">
			<checkbox-group class="select-increment" @change="selectIncrementChange">
				<label v-for="item in product.increment" @click="selectIncrementOk(item)">
					<!-- <checkbox :value="item.id" color="#0973F7" :checked="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1" :disabled="isMax && (increment.checked.findIndex(item2 => item.id === parseInt(item2)) === -1)" /> -->
					<span :style="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1 ? 'color: #333333' : 'color: #999999'">{{ item.name }}</span>
					<p :style="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1 ? 'color: #333333' : 'color: #999999'">{{ item.title }}</p>
					<span :style="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1 ? 'color: #333333' : 'color: #999999'">￥{{ item.price }}</span>
				</label>
			</checkbox-group>
		</drawer>
		
	</view>
</template>

<script>
		import drawer from '../../../components/drawer/drawer.vue';
	import {api, domain} from '@/util/api.js';
	export default {
		data() {
			return {
				navH: 0,
				domain: '',
				nowTitleTab: null,
				
				productList:[],
				nowProduct: 0,
				nowProductObj: {},
				productBanner: [],
				
				//机构列表
				institutionList: [],
				// 现在的机构
				nowInstitution: {},
				// 课程列表
				courseList: [],
				// 现在的课程
				nowCourse: {},
				
				// 现在显示的信息
				nowInfo: [],
				//现在的视频
				nowVideo: '',
				// 是否显示封面
				coverShow: true,
				nowCover: '',
				
				product: {},
				increment: {
					checkNum: 1,
					list: [],
					checked: [],
					checkedList: [],
					total_price: 0
				}
				
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}, 
			playVideo() {
				this.coverShow = false;
				uni.createVideoContext('targetVideo').play();
			},
			
			titleTabChange(index) {
				this.nowTitleTab = index;
				switch(index) {
					case 0: 
						this.getProductBanner();
						this.getProducts();
						break;
					case 1:
						this.getInstitutionData();
					
						break;
					default: 
						break;
				}
			},
			getInstitutionData() {
				api.getInstitutionList({type: 1}, res => {
					this.institutionList = res.data;
					if(this.institutionList.length > 0) {
						this.toggleInstitution(this.institutionList[0]);
					}
				})
			},
			selectInstitution() {
				this.$refs.drawer.open();
			},
			toggleInstitution(payload) {
				this.nowInstitution = payload;
				this.$refs.drawer.hide();
				this.getCourses(this.nowInstitution.id);
			},
			getCourses(id) {
				api.getGoodsList({
					goods_type: 4,
					mechanism_id: id
				}, res => {
					this.courseList = res.data;
					this.toggleCourseTab(this.courseList[0]);
				})
			},
			
			toggleCourseTab(payload) {
				this.nowCourse = payload;
				this.nowCover = payload.goods_cover
				this.coverShow = true;
				this.nowVideo = payload.goods_video;
				this.nowInfo = payload.goods_images.split(',');
			},
			
			getProductBanner() {
				api.getGoodsBanner({type: 3}, res => {
					// console.log(res.data[0]);
					this.productBanner = res.data.images;
				});
				
			},
			getProducts() {
				if(this.productList.length === 0) {
					api.getGoodsList({region_id: getApp().globalData.nowRegion.id, goods_type: 3}, res => {
						res.data.forEach(item => {
							if(item.status === 1) {
								this.productList.push(item);
							}
						})
						this.productTabHandler(this.productList[0].goods_id);
					})
				}
				
			},
			
			
			productTabHandler(goods_id) {
				this.nowProduct = goods_id;
				let i = this.productList.findIndex(item => {
					return item.goods_id === goods_id
				})
				this.nowProductObj = this.productList[i];
			},
			
			// goConfirmOrder() {
			// 	if(getApp().globalData.loginStatus === 1) {
			// 		switch(this.nowTitleTab) {
			// 			case 0: 
			// 				uni.navigateTo({
			// 					url: '../confirmOrder/confirmOrder?type=3&&goods_id=' + this.nowProductObj.goods_id
			// 				});
			// 				break;
			// 			case 1:
			// 				uni.navigateTo({
			// 					url: '../confirmOrder/confirmOrder?type=4&&goods_id=' + this.nowCourse.goods_id
			// 				});
			// 				break;
			// 			default: 
			// 				break;
			// 		}
			// 	} else {
			// 		uni.navigateTo({
			// 			url:'../../Login/Login'
			// 		})
			// 	}
			// },
			
			
			goConfirmOrder() {
				var that=this
				if(getApp().globalData.loginStatus === 1) {
					switch (this.nowTitleTab) {
						case 0: 
							that.getGoodsInfo(0);
							break;
						case 1:
							that.getGoodsInfo(1);
					
							break;
						default:
							break;
					}
				} else {
					uni.navigateTo({
						url:'../../Login/Login'
					})
				}
			},
			
			getGoodsInfo(type) {
				api.getGoodsInfo({ goods_id: type == 0 ? this.nowProductObj.goods_id : this.nowCourse.goods_id }, res => {
					this.product = res.data;
					console.log('看看', res);
					if (res.data.increment.length == 0) {
						//如果没有规格正常走
						if (type == 0) {
							return uni.navigateTo({
								url: '../confirmOrder/confirmOrder?type=3&&goods_id=' + res.data.goods_id
							});
						} else {
							return uni.navigateTo({
								url:  '../confirmOrder/confirmOrder?type=4&&goods_id=' + res.data.goods_id
							});
						}
					}
					this.selectIncrement();
				});
			},
			
			selectIncrement() {
				this.$refs.selectIncrement.open();
				let obj = { ...this.increment };
				obj.checked = [];
				obj.checkedList.forEach(item => {
					obj.checked.push(item.id);
				});
				this.increment = obj;
			},
			selectIncrementOk(item) {
				console.log('1111', item);
				let a = JSON.stringify(item);
			
				if (this.nowTitleTab == 0) {
					uni.navigateTo({
						url: '../confirmOrder/confirmOrder?type=3&&goods_id=' + this.nowProductObj.goods_id + '&&increment=' + a
					});
				} else {
					uni.navigateTo({
						url: '../confirmOrder/confirmOrder?type=4&&goods_id=' + this.nowCourse.goods_id + '&&increment=' + a
					});
				}
			},
			
			selectIncrementChange(res) {
				let obj = { ...this.increment };
				obj.checked = res.detail.value;
				this.increment = obj;
			}
			
		},
		onLoad() {
			let app = getApp();
			this.navH = app.globalData.navHeight;
			this.domain = domain;
			
			uni.showLoading({
				mask: 'true'
			});
			
			if(app.globalData.loginStatus !== 1) {
				app.login()
					.then((res)=>{
						this.titleTabChange(0);
						uni.hideLoading();
					})
			} else {
				this.titleTabChange(0);
				uni.hideLoading();
			}
			
			
		},
		// 分享
		onShareAppMessage: function(res) {
			return {
				title: '嘉洁到家',
				path: '/pages/index/index',
				success: function(res) {
					// 转发成功
					console.log('分享成功')
				},
				fail: function(res) {
				// 转发失败
					console.log('分享失败')
				}
			}
		},
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		/* overflow: visible; */
	}
	.title {
		display: flex;
		align-items: flex-end;
		width: 100%;
		flex-shrink: 0;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.title>.title-r {
		width: 19rpx;
		height: 66rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
	.title>.title-r>image {
		width: 100%;
	}
	.title-c {
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title-tab {
		background-color: #0086FB;
		border: 2rpx solid #0086FB;
		width: 315rpx;
		height: 64rpx;
		font-size: 0;
		border-radius: 32rpx;
		position: relative;
		display: flex;
		align-items: center;
	}
	.title-tab>button {
		padding: 0;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0;
		color: #ffffff;
		background-color: transparent;
		font-size: 28rpx;
		text-align: center;
		width: 164rpx;
		border-radius: 32rpx;
		position: absolute;
	}
	.title-tab>button.active {
		background-color: #ffffff;
		color: #0086FB;
	}
	.title-tab>button:nth-child(1) {
		left: 0;
	}
	.title-tab>button:nth-child(2) {
		right: 0;
	}
	
	.content {
		width: 100%;
		box-sizing: border-box;
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content>.title-tab-item {
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	
	.swiper {
		width: 100%;
		height: 470rpx;
		background-color: #eeeeee;
		/* position: absolute;
		top: 0;
		left: 0;
		z-index: -2; */
	}
	.swiper>swiper-item {
		width: 100%;
	}
	.swiper-image-wrapper {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.swiper-image {
		width: 100%;
	}
	
	.type {
		width: 100%;
		
	}
	
	.type>ul {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		overflow: auto;
		display: flex;
	}
	.type>ul>li {
		min-width: 255rpx;
		height: 141rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 12rpx;
		border-radius: 4rpx;
		border: 2rpx solid #ffffff;
	}
	.type>ul>li.active {
		background-color: rgba(241,247,253,0.7);
		border: 2rpx solid rgba(45,125,234, 0.7);
	}
	.type>ul>li>h3 {
		width: 100%;
		display: block;
		position: relative;
	}
	.type>ul>li>h3>span {
		position: absolute;
		font-size: 18rpx;
		/* width: 94rpx; */
		box-sizing: border-box;
		padding: 0 10rpx;
		height: 25rpx;
		background: linear-gradient(139deg, #FD7000 0%, #FE5000 100%);
		border-radius: 16rpx 0rpx 16rpx 0rpx;
		color: #ffffff;
		text-align: center;
		line-height: 25rpx;
		bottom: 89%;
		left: 0;
	}
	.type>ul>li>h3>p {
		font-size: 28rpx;
		color: #333333;
		width: 100%;
		display: block;
		font-weight: 600;
	}
	
	.type>ul>li>span {
		display: flex;
		align-items: center;
		margin-top: 13rpx;
	}
	.type>ul>li>span>span {
		font-size: 24rpx;
		color: #ff3232;
		font-weight: 900;
	}
	.type>ul>li>span>p {
		font-size: 22rpx;
		color: #999999;
	}
	.type-info {
		width: 100%;
		font-size: 0;
	}
	.type-info>image {
		width: 100%;
	}
	
	
	.footer {
		width: 100%;
		height: 136rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
	}
	.footer>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 502rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		
	}
	.footer>.btn-share {
		position: absolute;
		right: 20rpx;
		width: 60rpx;
		height: auto;
		margin: 0;
		line-height: normal;
		padding: 0;
		background-color: transparent;
		background-image: linear-gradient(to right, transparent, transparent);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer>.btn-share>image {
		width: 100%;
	}
	
	
	
	.title-tab-item-institution {
		overflow: hidden;
	}
	/* 培训样式 */
	.institution-wrapper {
		height: calc(100% - 141rpx);
		width: 100%;
		position: relative;
		overflow: auto;
	}
	.institution-wrapper>h3 {
		position: absolute;
		top: 5rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		color: #ffffff;
	}
	
	.video-wrapper {
		width: 100%;
		height: 370rpx;
		position: relative;
	}
	.cover-wrapper {
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 9;
		background-color: #000000;
	}
	.cover-wrapper>button {
		height: 120rpx;
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0,0,0,0.3);
		border: 10rpx solid #ffffff;
		color: #ffffff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
		z-index: 10;
		box-shadow:  0 0 14rpx #000;
	}
	.cover-wrapper>image {
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.institution-video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.course-wrapper {
		width: 100%;
	}
	
	.course-tab {
		width: 100%;
		text-align: center;
	}
	.course-tab>li {
		display: inline-block;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		font-size: 26rpx;
		color: #333333;
		min-width: 60rpx;
		
	}
	.course-tab>li.active {
		color: #0286FA;
		position: relative;
	}
	.course-tab>li.active::after {
		content: '';
		position: absolute;
		height: 4rpx;
		width: 40%;
		background-color: #0286FA;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.course-tab-item {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
	}
	
	.course-tab-item>image {
		width: 100%;
	}
	
	
	
	.institution-footer {
		width: 100%;
		height: 141rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 60rpx;
		background-color: #ffffff;
	}
	.institution-footer>span {
		color: #FF3232;
		font-size: 34rpx;
		font-weight: 500;
	}
	.institution-footer>button {
		width: 283rpx;
		height: 90rpx;
		background: linear-gradient(296deg, #0973F7 0%, #0286FA 100%);
		border-radius: 45rpx;
		font-size: 34rpx;
		color: #ffffff;
		margin: 0;
	}
	
	
	
	
	.institution-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
	}
	.institution-list>li {
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 30rpx 20rpx 30rpx 20rpx;
	}
	.institution-list>li.active {
		background-color: #eeeeee;
	}
	.address-item-left {
		font-size: 34rpx;
		color: #A7A7A7;
		background-color: #D8D8D8;
		height: 65rpx;
		width: 65rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	
	
	.address-item-center {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-grow: 1;
		/* border-right: 1rpx solid #eee; */
	}
	.address-item-center>span {
		font-size: 26rpx;
		color: #333333;
	}
	
	.select-increment {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.select-increment > label {
		width: 100%;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eeeeee;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
	}
	.select-increment > checkbox {
		flex-shrink: 0;
	}
	.select-increment > label > span:nth-child(2) {
		margin-left: 30rpx;
	}
	.select-increment > label > span {
		font-size: 24rpx;
		color: #999999;
		flex-shrink: 0;
	}
	.select-increment > label > p {
		font-size: 24rpx;
		color: #999999;
		box-sizing: border-box;
		padding: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex-grow: 1;
		text-align: center;
	}
	
</style>
